<template>
  <div class="main">
    <div class="form">
      <div class="titleLogo">
        <div class="logo">
          <img src="../../assets/images/logo1.png" alt="" />
        </div>

        <h2>泛鹏管理会计平台</h2>
      </div>
      <el-form :model="form" label-width="120" :rules="rules" ref="ruleForm">
        <el-form-item prop="username">
          <div class="iconsBox">
            <i class="icon-account iconfont" style="color: #fff"></i>
          </div>
          <el-input
            placeholder="请输入用户名"
            v-model="form.username"
            @keydown.enter.native="login"
          ></el-input>
        </el-form-item>
        <el-form-item style="margin-top: 5vh" prop="password">
          <div class="iconsBox">
            <i class="icon-password iconfont" style="color: #fff"></i>
          </div>
          <el-input
            v-model="form.password"
            :type="eyeIcons === 'icon-closeeyes' ? 'password' : 'text'"
            placeholder="请输入密码"
            @keydown.enter.native="login"
          ></el-input>
          <div :class="'eyeBox' + ' ' + eyeIconsRight" @click="eyeBtn">
            <i
              :class="eyeIcons + ' ' + 'iconfont'"
              style="color: #fff; font-size: 12px"
            >
            </i>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="tailBox" @click="tailBtn">
            <i :class="tailIcons + ' ' + 'iconfont'" style="color: #fff"></i>
          </div>
          <div class="tail">
            <span>记住密码</span>
          </div>
        </el-form-item>
        <el-form-item align="center">
          <el-button type="primary" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="copyright">
      <p>copyright©2008-2020 泛鹏天地科技股份有限公司版权</p>
    </div>
  </div>
</template>

<script>
import { authentication } from "@/api/index";
import { systemManage } from "@/api/index";
import { listToTree } from "@/lib/util";
import sm4 from "@/lib/gmsm4/index";
import jsCookie from "js-cookie";
import moment from "moment";
export default {
  data() {
    return {
      total: 0,
      tableData: [],
      tenantVisible: false,
      searchForm: {
        page: 1,
        size: 15,
        tennatName: ''
      },
      key: "40ca11f573cce61cc28e19998d5bb1c8",
      iv: "31313131313131313131313131313131",
      form: {
        username: "",
        password: "",
      },
      data: {
        username: "",
        password: "",
      },
      tailIcons: "icon-jizhumima0",
      eyeIcons: "icon-closeeyes",
      eyeIconsRight: "eyeIconsRightA",
      checked: false,
      rules: {
        username: [
          {
            required: true,
            message: "账户不能为空",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur",
          },
        ],
      },
      moduleList: [],
    };
  },
  mounted() {
    this.getPwd();
  },
  methods: {
    getPwd() {
      let pwd = jsCookie.get("pwd");
      if (pwd) {
        this.form = JSON.parse(pwd);
        this.tailIcons = "icon-jizhumima1";
      }
    },
    login() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (sessionStorage.getItem("loginToken")) {
            sessionStorage.removeItem("loginToken");
          }
          //加密
          this.data = {
            username: this.form.username,
            password: sm4.encryptWithECB(this.key, this.form.password),
          };
          authentication
            .getTokenByForm(this.data)
            .then((res) => {
              if (res.code == 200) {
                this.$store.commit("setToken", res.data.access_token);
                sessionStorage.setItem("loginToken", res.data.access_token);

                if (this.tailIcons == "icon-jizhumima1") {
                  // 存一下密码，存3天
                  jsCookie.set("pwd", JSON.stringify(this.form), {
                    expires: 3,
                  });
                } else {
                  jsCookie.remove("pwd");
                }
                this.getMenus()
              } else {
                this.$message.error(res.message);
              }
            })
            .catch(() => {});
        } else {
          return false;
        }
      });
    },
    // 获取菜单
    getMenus() {
           this.$store.commit("clearMenu");
           let firstmenu = {
            path: "/",
            name: "home",
            label: "欢迎页面",
            icon: "home",
          };
          this.$router.push({ name: "home" });
          this.$message.success("登录成功！");
          // 保存用户信息
          sessionStorage.setItem(
            "userInfo",
            JSON.stringify({
              user: this.form.username,
              time: moment(new Date()).format("yyyy年MM月DD日 HH:mm:ss"),
            })
          );
    },
    // 根据模块code 获取该模块下菜单并转化为tree
    getMenuByModuleCode(moduleCode, list) {
      let currentMenuList = [];
      for (let i = 0; i < list.length; i++) {
        if (list[i].moduleCode == moduleCode) {
          currentMenuList.push(list[i]);
        }
      }
      let menuTree = listToTree("menuId", "pId", currentMenuList);
      if (menuTree.length == 0) {
        return [];
      } else {
        return menuTree[0].children;
      }
    },
    //忘记密码
    tailBtn() {
      if (this.tailIcons === "icon-jizhumima0") {
        this.tailIcons = "icon-jizhumima1";
      } else {
        this.tailIcons = "icon-jizhumima0";
      }
    },
    eyeBtn() {
      if (this.eyeIcons === "icon-closeeyes") {
        this.eyeIcons = "icon-openeyes";
      } else {
        this.eyeIcons = "icon-closeeyes";
      }
      if (this.eyeIconsRight === "eyeIconsRightA") {
        this.eyeIconsRight = "eyeIconsRightB";
      } else {
        this.eyeIconsRight = "eyeIconsRightA";
      }
    },
  },
};
</script>


<style lang="scss" scoped>
.main {
  margin: 0;
  padding: 0;
  height: 100vh;
  background: url("../../assets/images/bg.png") no-repeat fixed;
  background-size: cover;
}

.copyright {
  position: absolute;
  width: 100%;
  text-align: center;
  color: #fff;
  top: 94vh;
}

.form {
  width: 65vh;
  height: 70vh;
  background-color: rgba(49, 69, 84, 0.57);
  border-radius: 1vh;
  z-index: 1;
  font-family: Helvetica;
  position: absolute;
  top: 15vh;
  right: 15vh;
  text-align: center;
  .titleLogo {
    margin-top: 8vh;
    width: 65vh;
    height: 20vh;
    .logo {
      width: 62vh;
      height: 10vh;
      margin-top: 5vh;
      img {
        width: 18vh;
        height: 4vh;
      }
    }
    h2 {
      color: rgba(255, 255, 254, 1);
      font-size: 2.8vh;
      font-weight: 500;
      text-align: center;
    }
  }
  .iconsBox {
    .icons {
      color: #fff;
    }
    position: absolute;
    left: 12vh;
    top: -3px;
  }

  input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder {
    color: rgba(151, 151, 151, 1);
  }

  input:-moz-placeholder,
  textarea:-moz-placeholder {
    color: rgba(151, 151, 151, 1);
  }

  input::-moz-placeholder,
  textarea::-moz-placeholder {
    color: rgba(151, 151, 151, 1);
  }

  input:-ms-input-placeholder,
  textarea:-ms-input-placeholder {
    color: rgba(151, 151, 151, 1);
  }

  /deep/ .el-input__inner {
    background-color: rgba(49, 69, 84, 0);
    color: #fff;
    font-size: 1.8vh;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: 0.2vh #979797 solid;
    border-radius: 0;
    width: 42vh;
    padding-left: 3vh;
  }
  /deep/ .el-input__suffix {
    right: 11.4vh;
  }
  /deep/ .el-form-item__error {
    left: 12vh;
  }

  button {
    outline: 0;
    color: rgba(255, 255, 255, 1);
    background: #506db1;
    font-size: 1.8vh;
    text-transform: uppercase;
    width: 50vh;
    padding: 2vh;
    border: none;
    border-radius: 4vh;
    cursor: pointer;
    margin-top: 10vh;
  }
  .tail {
    color: white;
    font-size: 12px;
    position: absolute;
    left: 14vh;
    top: -8.7px;
  }
  .tailBox {
    .icons {
      color: #fff;
    }
    position: absolute;
    left: 12vh;
    top: -11px;
  }
}
.eyeBox {
  position: absolute;
  top: 0px;
}
.eyeIconsRightA {
  right: 11vh;
}
.eyeIconsRightB {
  right: 11vh;
}
</style>
